<template>
	<view>
		<view class="box" :style="'padding-top:' + top + 'px'">
			<view class="box_user">
				<view class="box_user_corner">普通会员</view>
				<view class="box_user_info">
					<image class="box_user_info_avatar" :src="userInfo.avatarUrl || '../../static/avatar.png'"></image>
					<view class="box_user_info_name">
						<view class="box_user_info_name_nickName">
							<text v-if="userInfo.nickName">{{ userInfo.nickName }}</text>
							<button open-type="getUserInfo" @click="login" v-else style="background-color:rgba(255,255,255,0);color: #fff;">未登录</button>
						</view>
						<view class="box_user_info_name_vip">{{ userInfo.vip_level || '0' }}</view>
					</view>
					<view class="box_user_info_set">
						<uni-icons class="box_user_info_set_icon" color="#fff" type="gear" size="26" @click="setBtn"></uni-icons>
						<uni-icons class="box_user_info_set_icon" color="#fff" type="chatbubble" size="26" @click="msgBtn"></uni-icons>
					</view>
				</view>
				<view class="box_user_nav">
					<view class="box_user_nav_item" @click="incomeBtn">
						<image class="box_user_nav_item_img" src="/static/my/sy.png"></image>
						<view class="box_user_nav_item_text">收益</view>
					</view>
					<view class="box_user_nav_item" @click="orderBtn">
						<image class="box_user_nav_item_img" src="/static/my/dd.png"></image>
						<view class="box_user_nav_item_text">订单</view>
					</view>
					<view class="box_user_nav_item" @click="teamBtn">
						<image class="box_user_nav_item_img" src="/static/my/td.png"></image>
						<view class="box_user_nav_item_text">团队</view>
					</view>
					<view class="box_user_nav_item" @click="posterBtn">
						<image class="box_user_nav_item_img" src="/static/my/hb.png"></image>
						<view class="box_user_nav_item_text">海报</view>
					</view>
				</view>
			</view>
		</view>
		<view class="domain">
			<!-- 合伙人 -->
			<image class="domain_banner" src="/static/my/hhr.png" @click="domainBtn"></image>
			<!-- 金额 -->
			<view class="domain_money">
				<view class="domain_money_box">
					<view class="domain_money_box_title">可提现金额(元)</view>
					<view class="domain_money_box_num">{{wallet.money}}</view>
				</view>
				<view class="domain_money_btn" @click="cashoutBtn">提现</view>
			</view>
		</view>
		<view class="nav">
			<view class="nav_item" @click="couponBtn">
				<view class="nav_item_box">
					<image class="nav_item_box_icon" src="/static/my/yhq.png"></image>
					<view class="nav_item_box_text">优惠券</view>
				</view>
				<van-icon name="arrow" />
			</view>
			<view class="nav_item" @click="questionBtn">
				<view class="nav_item_box">
					<image class="nav_item_box_icon" src="/static/my/cjwt.png"></image>
					<view class="nav_item_box_text">常见问题</view>
				</view>
				<van-icon name="arrow" />
			</view>
			<view class="nav_item" @click="feedback">
				<view class="nav_item_box">
					<image class="nav_item_box_icon" src="/static/my/yjfk.png"></image>
					<view class="nav_item_box_text">意见反馈</view>
				</view>
				<van-icon name="arrow" />
			</view>
			<view class="nav_item">
				<!-- #ifdef MP-WEIXIN -->
				<button class="nav_item_btn" open-type="contact"></button>
				<!-- #endif -->
				<view class="nav_item_box">
					<image class="nav_item_box_icon" src="/static/my/kf.png"></image>
					<view class="nav_item_box_text">客服</view>
				</view>
				<van-icon name="arrow" />
			</view>
		</view>
	</view>
</template>

<script>
import Login from '../../utils/login.js';
import Route from '../../utils/route.js';
export default {
	data() {
		return {
			// 安全区
			top: 0,
			// 用户详情
			userInfo: {},
			// 钱包
			wallet:{},
		};
	},
	onLoad() {
		//#ifdef MP-WEIXIN
		// 小程序胶囊按钮
		let MenuButton = uni.getMenuButtonBoundingClientRect();
		// this.top = MenuButton.top + MenuButton.height
		this.top = MenuButton.top + 13;
		//#endif
	},
	onShow() {
		this.getWallet()
		this.userInfo = uni.getStorageSync('userInfo');
	},
	methods: {
		//账号设置
		async setBtn() {
			await Login.isLogin();
			uni.navigateTo({
				url: '../set/set'
			});
		},
		// 消息
		async msgBtn() {
			await Login.isLogin();
			uni.navigateTo({
				url: '../msg/msg'
			});
		},
		// 收益
		async incomeBtn() {
			await Login.isLogin();
			uni.navigateTo({
				url: '../income/income'
			});
		},
		// 订单
		async orderBtn() {
			await Login.isLogin();
			uni.navigateTo({
				url: '../order/order'
			});
		},
		// 团队
		async teamBtn() {
			await Login.isLogin();
			uni.navigateTo({
				url: '../team/team'
			});
		},
		// 海报
		async posterBtn() {
			await Login.isLogin();
			uni.navigateTo({
				url: '../poster/poster'
			});
		},
		// 合伙人
		async domainBtn() {
			await Login.isLogin();
			uni.navigateTo({
				url: '../domain/domain'
			});
		},
		// 提现
		async cashoutBtn() {
			await Login.isLogin();
			uni.navigateTo({
				url: '../cashout/cashout'
			});
		},
		// 反馈
		async feedback() {
			await Login.isLogin();
			uni.navigateTo({
				url: '../feedback/feedback'
			});
		},
		// 问题
		questionBtn() {
			uni.navigateTo({
				url: '../question/question'
			});
		},
		// 优惠券
		async couponBtn() {
			await Login.isLogin();
			uni.navigateTo({
				url:'../coupon/coupon'
			})
		},
		// 登陆
		login() {
			uni.navigateTo({
				url:'../login_userInfo/login_userInfo'
			})
		},
		//钱包
		async getWallet(){
			this.wallet = await Route.wallet_inco({
				uid:uni.getStorageSync('userInfo').uid
			})
		},
	}
};
</script>

<style lang="scss">
page {
	background: #f8f8f8;
}
.box {
	background: url(https://god-mini.oss-cn-beijing.aliyuncs.com/static/my/bg.png) 0% 0% /100% 100% no-repeat;
	position: relative;
	top: 0;
	left: 0;
	width: 750rpx;
	height: 336rpx;
	&_user {
		background: url(https://god-mini.oss-cn-beijing.aliyuncs.com/static/my/user_box.png) 0% 0% /100% 100% no-repeat;
		position: relative;
		bottom: -46rpx;
		left: 0;
		right: 0;
		padding: 0 30rpx;
		width: 626rpx;
		height: 290rpx;
		margin: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&_corner {
			position: absolute;
			right: 0;
			top: 50rpx;
			color: #e4cd71;
			transform: rotate(49deg);
			font-size: 28rpx;
		}
		&_info {
			display: flex;
			align-items: center;
			&_avatar {
				width: 110rpx;
				height: 110rpx;
				border: 10rpx solid #e5c25c;
				border-radius: 50%;
			}
			&_name {
				height: 120rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 33rpx;
				&_nickName {
					color: #fff;
					font-size: 38rpx;
					font-weight: 600;
				}
				&_vip {
					width: 32rpx;
					height: 40rpx;
					line-height: 40rpx;
					padding-left: 100rpx;
					background: url('https://god-mini.oss-cn-beijing.aliyuncs.com/static/vip.png') 0% 0% / 100% 100% no-repeat;
					color: #fff;
					font-size: 26rpx;
					font-weight: 900;
				}
			}
			&_set {
				display: flex;
				align-items: center;
				margin-bottom: 6rpx;
				&_icon {
					margin-left: 33rpx;
				}
			}
		}
		&_nav {
			background: url(https://god-mini.oss-cn-beijing.aliyuncs.com/static/my/num_box.png) 0% 0% /100% 100% no-repeat;
			display: flex;
			justify-content: space-between;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 578rpx;
			height: 178rpx;
			bottom: -122rpx;
			padding: 0 30rpx;
			&_item {
				margin-top: 50rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				&_img {
					width: 55rpx;
					height: 55rpx;
				}

				&_text {
					margin-top: 10rpx;
					font-size: 26rpx;
					color: #9d9d9e;
				}
			}
		}
	}
}

.domain {
	padding-bottom: 30rpx;
	position: relative;
	top: 125rpx;
	&_banner {
		width: 632rpx;
		height: 93rpx;
		display: block;
		margin: auto;
		margin-top: 30rpx;
	}
	&_money {
		width: 572rpx;
		padding: 0 30rpx;
		height: 111rpx;
		background: #fff;
		margin: auto;
		margin-top: 30rpx;
		border-radius: 26rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		&_box {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			height: 100rpx;
			margin: auto 0;
			&_title {
				font-size: $uni-font-size-sm;
			}
			&_num {
				font-size: $uni-font-size-lg;
				font-weight: 900;
			}
		}
		&_btn {
			font-size: 28rpx;
			border: 2rpx solid #9d9d9e;
			width: 133rpx;
			height: 66rpx;
			text-align: center;
			line-height: 66rpx;
			border-radius: 33rpx;
		}
	}
}

.nav {
	width: 572rpx;
	padding: 30rpx;
	background: #fff;
	margin: auto;
	margin-top: 120rpx;
	border-radius: 26rpx;
	display: flex;
	flex-direction: column;
	margin-bottom: 30rpx;
	&_item:nth-child(1) {
		border-top: 2rpx solid $template-line;
	}
	&_item {
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 2rpx solid $template-line;
		position: relative;
		&_btn {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
			opacity: 0;
		}
		&_box {
			display: flex;
			align-items: center;
			&_icon {
				width: 55rpx;
				height: 55rpx;
			}
			&_text {
				font-size: 26rpx;
				margin-left: 49rpx;
			}
		}
	}
}
</style>
